{% extends 'blog_base.html' %}
{% load static %}


{% block title %}账户设置{% endblock %}

{% block main %}
    <div class="container-lg">
        <div class="row g-4">
            <!-- 侧边导航 -->
            <div class="col-md-3">
                <div class="card shadow-sm sticky-md-top" style="top: 1rem;">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">设置中心</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a class="list-group-item list-group-item-action active" href="#profile" data-bs-toggle="tab">
                            <i class="bi bi-person me-2"></i>个人资料
                        </a>
                        <a class="list-group-item list-group-item-action" href="#security" data-bs-toggle="tab">
                            <i class="bi bi-shield-lock me-2"></i>账户安全
                        </a>
                        <a class="list-group-item list-group-item-action" href="#notifications" data-bs-toggle="tab">
                            <i class="bi bi-bell me-2"></i>通知设置
                        </a>
                        <a class="list-group-item list-group-item-action" href="#privacy" data-bs-toggle="tab">
                            <i class="bi bi-lock me-2"></i>隐私设置
                        </a>
                        <a class="list-group-item list-group-item-action" href="#appearance" data-bs-toggle="tab">
                            <i class="bi bi-palette me-2"></i>主题外观
                        </a>
                    </div>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9">
                <div class="tab-content">
                    <!-- 个人资料 -->
                    <div class="tab-pane fade show active" id="profile">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h4 class="card-title mb-4"><i class="bi bi-person me-2"></i>基本资料</h4>

                                <form>
                                    <div class="row g-4">
                                        <!-- 头像上传 -->
                                        <div class="col-12">
                                            <div class="d-flex align-items-center">
                                                <div class="me-4">
                                                    <img src="{% static 'image/cat.png' %}"
                                                         class="rounded-circle shadow"
                                                         width="100"
                                                         height="100"
                                                         alt="当前头像">
                                                </div>
                                                <div class="flex-grow-1">
                                                    <label class="form-label">上传新头像</label>
                                                    <input type="file"
                                                           class="form-control"
                                                           accept="image/png, image/jpeg">
                                                    <small class="text-muted">建议尺寸 256x256px，不超过2MB</small>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 用户名 -->
                                        <div class="col-md-6">
                                            <label class="form-label">用户名</label>
                                            <input type="text"
                                                   class="form-control"
                                                   value="{{ user.username }}"
                                                   required>
                                        </div>

                                        <!-- 电子邮箱 -->
                                        <div class="col-md-6">
                                            <label class="form-label">电子邮箱</label>
                                            <div class="input-group">
                                                <input type="email"
                                                       class="form-control"
                                                       value="{{ user.username }}"
                                                       required>
                                                <button class="btn btn-outline-secondary"
                                                        type="button"
                                                        data-bs-toggle="tooltip"
                                                        title="需要邮件验证">
                                                    <i class="bi bi-patch-exclamation"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- 个人简介 -->
                                        <div class="col-12">
                                            <label class="form-label">个人简介</label>
                                            <textarea class="form-control"
                                                      rows="3"
                                                      maxlength="200">全栈开发者，专注于Python和Web技术</textarea>
                                            <small class="text-muted">最多200字</small>
                                        </div>

                                        <!-- 社交链接 -->
                                        <div class="col-12">
                                            <div class="border-top pt-4 mt-2">
                                                <h5 class="mb-3"><i class="bi bi-link-45deg me-2"></i>社交资料</h5>
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="bi bi-github"></i>
                                                        </span>
                                                            <input type="url"
                                                                   class="form-control"
                                                                   placeholder="GitHub 主页链接">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="bi bi-linkedin"></i>
                                                        </span>
                                                            <input type="url"
                                                                   class="form-control"
                                                                   placeholder="LinkedIn 主页链接">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 保存按钮 -->
                                        <div class="col-12 text-end mt-4">
                                            <button type="submit" class="btn btn-primary px-4">
                                                <i class="bi bi-save me-2"></i>保存修改
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- 账户安全 -->
                    <div class="tab-pane fade" id="security">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h4 class="card-title mb-4"><i class="bi bi-shield-lock me-2"></i>安全设置</h4>

                                <!-- 密码修改 -->
                                <div class="border-bottom pb-4 mb-4">
                                    <h5>修改密码</h5>
                                    <form class="row g-3 mt-2">
                                        <div class="col-md-6">
                                            <label class="form-label">当前密码</label>
                                            <input type="password" class="form-control" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">新密码</label>
                                            <input type="password" class="form-control" required>
                                        </div>
                                        <div class="col-12">
                                            <div class="progress mt-2" style="height: 4px;">
                                                <div class="progress-bar bg-success"
                                                     role="progressbar"
                                                     style="width: 75%">
                                                </div>
                                            </div>
                                            <small class="text-muted">密码强度：强</small>
                                        </div>
                                        <div class="col-12 text-end">
                                            <button type="submit" class="btn btn-primary">确认修改</button>
                                        </div>
                                    </form>
                                </div>

                                <!-- 双重认证 -->
                                <div class="border-bottom pb-4 mb-4">
                                    <h5>双重认证</h5>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <div>
                                            <i class="bi bi-phone me-2"></i>
                                            短信验证
                                            <small class="text-muted d-block">当前绑定：+86 ***1234</small>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" checked>
                                        </div>
                                    </div>
                                </div>

                                <!-- 安全日志 -->
                                <div>
                                    <h5>最近登录记录</h5>
                                    <div class="list-group mt-3">
                                        <div class="list-group-item">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <i class="bi bi-pc me-2"></i>
                                                    中国上海 • Chrome浏览器
                                                    <small class="text-muted d-block">2023-07-21 14:30</small>
                                                </div>
                                                <span class="text-success">当前会话</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 通知设置 -->
                    <div class="tab-pane fade" id="notifications">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h4 class="card-title mb-4"><i class="bi bi-bell me-2"></i>通知偏好</h4>

                                <div class="row g-3">
                                    <!-- 邮件通知 -->
                                    <div class="col-md-6">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between">
                                                    <div>
                                                        <h6><i class="bi bi-envelope me-2"></i>邮件通知</h6>
                                                        <small class="text-muted">重要账户变更通知</small>
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" checked>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 站内信 -->
                                    <div class="col-md-6">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between">
                                                    <div>
                                                        <h6><i class="bi bi-chat me-2"></i>站内消息</h6>
                                                        <small class="text-muted">评论和私信通知</small>
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" checked>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 隐私设置 -->
                    <div class="tab-pane fade" id="privacy">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h4 class="card-title mb-4"><i class="bi bi-lock me-2"></i>隐私控制</h4>

                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="searchVisibility">
                                            <label class="form-check-label" for="searchVisibility">
                                                允许搜索引擎收录我的主页
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="dataSharing">
                                            <label class="form-check-label" for="dataSharing">
                                                允许匿名数据用于产品改进
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-12 mt-4">
                                        <h5><i class="bi bi-download me-2"></i>数据管理</h5>
                                        <button class="btn btn-outline-secondary">
                                            <i class="bi bi-database me-2"></i>导出个人数据
                                        </button>
                                        <button class="btn btn-outline-danger ms-2">
                                            <i class="bi bi-trash me-2"></i>删除账户
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 主题外观 -->
                    <div class="tab-pane fade" id="appearance">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h4 class="card-title mb-4"><i class="bi bi-palette me-2"></i>界面主题</h4>

                                <div class="row g-3">
                                    <!-- 主题选择 -->
                                    <div class="col-md-6">
                                        <div class="card theme-card" data-theme="light">
                                            <div class="card-body text-center">
                                                <div class="theme-preview bg-light rounded p-3 mb-3">
                                                    <div class="d-flex gap-2 mb-3">
                                                        <span class="badge bg-primary">Primary</span>
                                                        <span class="badge bg-secondary">Secondary</span>
                                                    </div>
                                                    <p class="text-muted mb-0">浅色模式</p>
                                                </div>
                                                <button class="btn btn-outline-primary w-100">
                                                    应用浅色主题
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="card theme-card" data-theme="dark">
                                            <div class="card-body text-center">
                                                <div class="theme-preview bg-dark rounded p-3 mb-3">
                                                    <div class="d-flex gap-2 mb-3">
                                                        <span class="badge bg-primary">Primary</span>
                                                        <span class="badge bg-secondary">Secondary</span>
                                                    </div>
                                                    <p class="text-light mb-0">深色模式</p>
                                                </div>
                                                <button class="btn btn-outline-dark w-100">
                                                    应用深色主题
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 高级设置 -->
                                    <div class="col-12 mt-4">
                                        <h5><i class="bi bi-sliders me-2"></i>高级设置</h5>
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label">默认字体大小</label>
                                                <select class="form-select">
                                                    <option>小</option>
                                                    <option selected>中</option>
                                                    <option>大</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">代码高亮主题</label>
                                                <select class="form-select">
                                                    <option>GitHub</option>
                                                    <option>Monokai</option>
                                                    <option>Solarized</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block head %}
    <style>
        /* 自定义样式 */
        .theme-card {
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .theme-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .form-switch .form-check-input {
            width: 3em;
            height: 1.5em;
        }

        .progress {
            background-color: #e9ecef;
        }

        .sticky-md-top {
        {#position: -webkit-sticky;#} position: sticky;
            top: 1rem;
            z-index: 1020;
        }

        .list-group-item.active {
            background: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .theme-preview {
            border: 1px solid rgba(0, 0, 0, .125);
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        // 主题切换功能
        document.querySelectorAll('.theme-card').forEach(card => {
            card.addEventListener('click', function () {
                const theme = this.dataset.theme;
                document.documentElement.setAttribute('data-bs-theme', theme);
                localStorage.setItem('theme', theme);
            });
        });

        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-bs-theme', savedTheme);

        // 初始化工具提示
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
{% endblock %}